<template>
  <div>
    <!-- 本周缺口图 -->
    <div class="top"><span><i class="el-icon-s-data
        "></i></span><span style="margin-left:10px">{{title1}}</span></div>
    <gap-tendency></gap-tendency>
    <!-- 详细数据 -->
    <div class="top1">
        <span><i class="el-icon-tickets
        "></i></span><span style="margin-left:10px">{{title2}}</span>
        <div class="search">
            <el-input placeholder="输入企业名称/代码" prefix-icon="el-icon-search" 
                v-model="keywords" @keyup.enter="goSearch()" />
            <div class="contain">
                
            </div>
        </div>
    </div>
    <div class="table">
      <el-table
      :row-key="row => row.index"
      v-loading="listLoading"
      :data="TableData"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      :cell-style="cellStyle"
      >
        <el-table-column label="停电时间" sortable prop="DuraTime" align="center"></el-table-column>
        <el-table-column label="企业名称" prop="BussName" align="center"></el-table-column>
        <!-- 类型 -->
        <el-table-column label="类型" prop="Type" 
        min-width="40px" align="center"
        :filters="[{text: 'A', value: 'A'}, 
        {text: 'B', value: 'B'}, {text: 'C', value: 'C'}, 
        {text: '高能耗', value: '高能耗'}]"
        :filter-method="filterHandler1"></el-table-column>
        <!-- 状态 -->
        <el-table-column label="状态" prop="State" 
        min-width="40px" align="center"
        :filters="[{text: '已选', value: '已选'}, 
        {text: '未选', value: '未选'}]"
        :filter-method="filterHandler2"></el-table-column>
        <!-- 是否达标 -->
        <el-table-column label="是否达到指标" prop="HitTarget" align="center"
        :filters="[{text: '达标', value: '达标'}, 
        {text: '未达标', value: '未达标'}]"
        :filter-method="filterHandler3"></el-table-column>
        <el-table-column label="实际认领额度" sortable prop="RealClaim" align="center"></el-table-column>
        <el-table-column label="应当认领额度" sortable prop="ShouldClaim" align="center"></el-table-column>
        <el-table-column label="认领时间" prop="ClaimTime" align="center" width="100px"></el-table-column>
        <el-table-column label="操作"  align="center" min-width="60px">
            <template slot-scope="scope">
              <el-button
                size="small"
                @click="handle(scope.row)" :disabled=scope.row.TargetState>催认领</el-button>
            </template>
          </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    </div>
  </div>
  
</template>

<script>
import TableData from '@/utils/TableData.js'
import GapTendency from '@/components/echart/GapTendency.vue';
import SearchBorad from '@/components/search/SearchBorad.vue';
import Pagination from '@/components/Pagination'
export default {
    components: {
        GapTendency,
        SearchBorad,
        Pagination
    },
    mounted () {
        
    },
    created() {
        this.getList()
    },
    data() {
        return {
            title1: "本周缺口图",
            title2: "详细数据",
            TableData:null,
            react:"达标",
            keywords:'',
            listLoading:false,
            total: 0,
            listQuery: {
                page: 1,
                limit: 5,
                importance: undefined,
                title: undefined,
                type: undefined,
                sort: '+id'
            },
        }
            
    },
    methods: {
        //判断是否达标，达标为绿色，未达标为红色
        cellStyle(row, column, rowIndex, columnIndex) {
            console.log(row, column, rowIndex, columnIndex)
            if(row.row.HitTarget == "未达标" && row.columnIndex == 4){
                return "color:red"
            }else if(row.row.HitTarget == "达标" && row.columnIndex == 4){
                return "color:green"
            }
        },
        getList() {
            this.listLoading = true
            // fetchList(this.listQuery).then(response => {
            //     this.TableData = response.data.items
            //     this.total = response.data.total
            //     // Just to simulate the time of the request
            //     setTimeout(() => {
            //     this.listLoading = false
            //     }, 1.5 * 1000)
            // })
            let TableArray = []
            for (let i = (this.listQuery.page-1)*this.listQuery.limit;i <this.listQuery.page * this.listQuery.limit;i++)
            {
                if(i<TableData.TableData1.length){
                    TableArray.push(TableData.TableData1[i])
                }
            }
            this.TableData = TableArray;
            console.log(this.TableData)
            this.listLoading = false;
            this.total = TableData.TableData1.length;
        },
        goSearch(event){
            console.log(event)
        },
        handle(row) {
            console.log(row)
        },
        //过滤器无用，到后期连接数据库，可删除
        filterHandler1(value, row, column){
            const property = column['property'];
            return row[property] === value;
        },
        filterHandler2(value, row, column){
            const property = column['property'];
            return row[property] === value;
        },
        filterHandler3(value, row, column){
            const property = column['property'];
            return row[property] === value;
        },
    },
}
</script>

<style scoped lang="scss">
.top{
    width: 100%;
    height: 10px;
    font-weight: 10px;
    span{
        line-height: 10px;
    }
}
.top1{
    width: 100%;
    height: 50px;
    font-weight: 10px;
    margin-top: 20px;
    span{
        line-height: 20px;
    }
}
.search{
    display: inline-block;
    height: 50px;
    margin-left: 200px;
}
.contain{
    display: flex;
    justify-content: space-around;
  }
.search-icon{
margin-left: 30px;
}
</style>